<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <!-- <el-dialog :title="dialogTitle"  width="80%" v-dialogDrag append-to-body> -->
    <h2 class="titless" v-if="!id"> 编辑客服</h2>
    <div v-else>
      <h2 class="titless"> 1、分享链接添加客服(将此链接发给需要添加的客服)</h2>
      <div @copy="handleCopyComponent(index)">
        {{ lianjies }}
      </div>

      <h2 class="titless"> 2、也可以输入客服APP 账户添加客服(请填入需要添加的客服App的账号，即App---个人信息--账户)</h2>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
        <!-- <h6 style="margin-left:2rem">注：请填入需要添加的客服App的账号，即App---个人信息--账户</h6>
                     -->

        <el-form-item label="客服app账户" prop="客服的App用户的账号">
          <el-input v-model="formData.appUid" placeholder="请输入客服App的账号" />
        </el-form-item>
        <!-- <h4>请输入客服收到的验证短信码，或APP中消息验证码</h4>
                     <el-form-item label="otherData" prop="客服的验证码">
                      <el-input v-model="formData.otherData" placeholder="请输入" />
                    </el-form-item> -->
      </el-form>
    </div>
    <el-form ref="formRef" v-if="!id" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
      <!-- <h6 style="margin-left:2rem">注：请填入需要添加的客服App的账号，即App---个人信息--账户</h6>
                     -->

      <el-form-item label="客服app账户" prop="客服的App用户的账号">
        <el-input v-model="formData.appUid" placeholder="请输入客服App的账号" />
      </el-form-item>
      <!-- <h4>请输入客服收到的验证短信码，或APP中消息验证码</h4>
                     <el-form-item label="otherData" prop="客服的验证码">
                      <el-input v-model="formData.otherData" placeholder="请输入" />
                    </el-form-item> -->
      <el-form-item label="客服名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" />
      </el-form-item>
      <!--  <el-form-item label="类型" prop="type">
                      <el-radio-group v-model="formData.type">
                            <el-radio
v-for="dict in getDictDatas(DICT_TYPE.USER_TYPE)"
                                      :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                      </el-radio-group>
                    </el-form-item>-->
      <!-- <el-form-item label="组别" prop="group">
                      <el-input v-model="formData.group" placeholder="请输入组别" />
                    </el-form-item> -->
      <el-form-item label="头像">

        <UploadImg v-model="formData.faceImg" />


      </el-form-item>
      <!--        <el-form-item label="店铺" prop="shopId">
                      <el-input v-model="formData.shopId" placeholder="请输入店铺" />
                    </el-form-item> -->

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio v-for="dict in getIntDictOptions" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入排序" />
      </el-form-item>
    </el-form>
    <div class="dialog-footer" style="display: flex;width: 80%;margin: 4% auto;    justify-content: space-around;">
      <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
      <el-button @click="quxiaos">取 消</el-button>
    </div>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
import * as KefuApi from '@/api/kefu';

export default {
  name: "KefuForm",
  components: {

  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['id'],
  data() {
    return {
      lianjies: "",
      getIntDictOptions: [
        { value: 0, label: "正常" },
        { value: 1, label: "停用" }
      ],
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: true,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        id: undefined,
        name: undefined,
        type: undefined,
        group: undefined,
        faceImg: undefined,
        shopId: undefined,
        appUid: undefined,
        status: undefined,
        sort: undefined,
      },
      // 表单校验
      formRules: {

        appUid: [{ required: true, message: '客服app账户不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '客服名称不能为空', trigger: 'blur' }]
      },
    }
  },
  //props
  mounted() {
    console.log(this.id, "LLLLLLLLLL>>>")

    if (!this.id) {
      this.lianjies = "11111111111111"
    }
    open(this.id);
  },
  methods: {
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true;
      this.reset();
      // 修改时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await KefuApi.getKefu(id);
          this.formData = res.data;
          this.title = "修改客服";
        } finally {
          this.formLoading = false;
        }
      }
      this.title = "新增客服";
    },

    quxiaos(){
      this.$emit('quxiaos');
    },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
        const data = this.formData;
        // 修改的提交
        if (data.id) {
          await KefuApi.updateKefu(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit('success');
          return;
        }
        // 添加的提交
        await KefuApi.createKefu(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        name: undefined,
        type: undefined,
        group: undefined,
        faceImg: undefined,
        shopId: undefined,
        appUid: undefined,
        status: undefined,
        sort: undefined,
      };
      // this.resetForm("formRef");
    }
  }
};
</script>
<style scoped>
::v-deep .el-form {
  width: 96%;
  margin: 2% auto;
}

.titless {
  width: 100%;
  text-align: center;
  margin: 4% auto;
}
</style>